<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <div class="lg:w-2/12 w-full h-full p-2 shadow">
      <ma-tree-slider
        v-model:visible="formVisible"
        :data="depts"
        searchPlaceholder="大屏分类"
        v-model="defaultKey"
        @click="switchDept"
        is-edit
      >
        <template #edit>
          <ma-form v-model="form" :columns="formColumns" ref="crudForm" @submit="handlerSubmit" />
        </template>
        <template #editData="nodeData">
          <div class="opacity-100 hover:opacity-100 flex gap-1">
            <a-button @click="formEdit(nodeData)" type="text" class="text-right p-2">
              <i class="bi-edit-line" />
            </a-button>
            <a-popconfirm content="确定删除?" @ok="formDel(nodeData)">
              <a-button status="danger" type="text" class="text-right p-2">
                <i class="bi-delete-bin-2-line" />
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </ma-tree-slider>
    </div>
    <div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #operationBeforeExtend="{ record }">
          <a-link @click="goEdit(record)">
            <icon-computer />
            数据集
          </a-link>
        </template>
      </ma-crud>
    </div>
  </div>
</template>

<script setup lang="jsx">
import { ref, reactive } from "vue"
import api from "../api/cube"
import cubeCategory from "../api/cubeCategory.js"

const crudRef = ref()

const crud = reactive({
  api: api.getPageList,
  recycleApi: api.getRecyclePageList,
  showIndex: false,
  pageLayout: "fixed",
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  searchLabelWidth: "200px",
  add: { show: true, api: api.save, auth: ["/app/datasource/DataCube/save"] },
  edit: {
    show: true,
    api: api.update,
    auth: ["/app/datasource/DataCube/edit"]
  },
  delete: {
    show: true,
    api: api.delete,
    auth: ["/app/datasource/DataCube/destroy"],
    realApi: api.realDestroy,
    realAuth: ["/app/datasource/DataCube/realDestroy"]
  },
  recovery: {
    show: true,
    api: api.recovery,
    auth: ["/app/datasource/DataCube/recovery"]
  },
  formOption: { width: 800 }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    formType: "input",
    commonRules: [{ required: true, message: "必填" }]
  },
  {
    title: "分类名称",
    dataIndex: "category_id",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "tree-select",
    commonRules: [{ required: false, message: "必填" }],
    dict: {
      url: "/datasource/DataCubeCategory/index?tree=true"
    },
    customRender: ({ record }) => {
      return record.category.category_name
    }
  },
  {
    title: "数据集名称",
    dataIndex: "name",
    width: 180,
    search: true,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    commonRules: [{ required: true, message: "必填" }]
  },
  {
    title: "所属数据源",
    dataIndex: "datasource_id",
    width: 100,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "select",
    commonRules: [{ required: true, message: "必选" }],
    dict: {
      url: "datasource/DataSource/index",
      props: { label: "name", value: "id" },
      params: {
        saiType: "all"
      }
    },
    customRender: ({ record }) => {
      return record.datasource.name
    }
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    formType: "input",
    commonRules: [{ required: true, message: "必填" }]
  },
  {
    title: "更新时间",
    dataIndex: "update_time",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: false,
    formType: "input",
    commonRules: [{ required: true, message: "必填" }]
  }
])
import { useRouter } from "vue-router"
import MaTreeSlider from "@cps/ma-treeSlider/index.vue"
import { Message } from "@arco-design/web-vue"
import visualCategory from "@/views/visual/api/visualCategory.js"
const router = useRouter()
const goEdit = (record) => {
  const route = router.resolve({
    path: "/cubeeditor",
    query: { id: record.id, name: record.name }
  })
  window.open(route.href, "_blank")
}

const depts = ref([{ label: "所有分类", value: 0 }])
onMounted(() => {
  api.categoryTree().then((res) => {
    depts.value.push(...res.data)
  })
})
const defaultKey = ref([0])
const switchDept = (id) => {
  crudRef.value.requestParams = id[0] === 0 ? { category_id: undefined } : { category_id: id[0] }
  crudRef.value.requestData()
  defaultKey.value = id
}
const form = ref({})
const formVisible = ref(false)
// 组件的字段设置
const formColumns = reactive([
  {
    title: "上级分类",
    dataIndex: "pid",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "tree-select",
    multiple: false,
    dict: { url: "/datasource/DataCubeCategory/index?tree=true" },
    commonRules: [{ required: false, message: "分类必填" }],
    customRender: ({ record }) => {
      return record?.category?.title
    }
  },
  {
    title: "分类名称",
    dataIndex: "category_name",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    rules: [{ required: true, message: "分类名称必填" }]
  },
  {
    title: "排序",
    dataIndex: "sort",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    rules: [{ required: true, message: "分类名称必填" }]
  }
])

const handlerSubmit = (data, done) => {
  // 显示表单提交中状态
  done(true)
  if (data) {
    let url = ""
    if (data.id) {
      url = cubeCategory.update(data.id, data)
    } else {
      url = cubeCategory.save(data)
    }
    url
      .then((res) => {
        if (res.code === 200 && res.message) {
          Message.success(res.message)
          formVisible.value = false
          api.categoryTree().then((res) => {
            depts.value = [{ label: "所有分类", value: 0 }].concat(res.data)
          })
        }
      })
      .catch((e) => {
        console.error(e)
        Message.error("提交失败")
      })
  }
  // 关闭表单提交中状态
  done(false)
}
const formEdit = ({ nodeData }) => {
  form.value = nodeData
  formVisible.value = true
}
const formDel = ({ nodeData }) => {
  cubeCategory.realDestroy({ ids: [nodeData.id] }).then((res) => {
    api.categoryTree().then((res) => {
      depts.value = [{ label: "所有分类", value: 0 }].concat(res.data)
    })
  })
}
</script>
